<!-- eslint-disable vue/require-v-for-key -->
<template>
  <el-card class="box-card">
    <div slot="header" class="header">
      <i>
        <img
          :src="
            detailObj.digitalCertificatePath
              ? require('@/assets/images/import/jrcp01.png')
              : require('@/assets/images/import/jrcp01.png')
          "
          alt />
        涉密信息系统集成资质
      </i>
      <!-- <el-tag
        size="small"
        :class="['Inspan', detailObj.proStatus == 1 ? 'serious' : detailObj.proStatus == 2 ? 'unknow' : 'simple']"
      >{{ detailObj.proStatus == 1 ? '异常' : detailObj.proStatus == 2 ? '未知' : '正常' }}</el-tag> -->
    </div>
    <el-row class="ctop">
      <el-col :span="5" class="col-title">资质名称:</el-col>
      <el-col :span="7" class="col-con">{{ detailObj.credentialName }}</el-col>

      <el-col :span="5" class="col-title">证书编号:</el-col>
      <el-col :span="7" class="col-con">{{ detailObj.certificateNo }}</el-col>
      <el-col :span="5" class="col-title">资质等级：</el-col>
      <el-col :span="7" class="col-con">
        <dict-label :options="dictList.credentialLevelList" :value="detailObj.credentialLevel" />
      </el-col>
      <el-col :span="5" class="col-title">资质类型：</el-col>
      <el-col :span="7" class="col-con">
        <dict-label :options="dictList.credentialTypelList" :value="detailObj.credentialType" />
      </el-col>
      <el-col :span="5" class="col-title">发证时间：</el-col>
      <el-col :span="7" class="col-con">{{ detailObj.publishDate && detailObj.publishDate.split(' ')[0] }}</el-col>
      <!-- <el-col :span="5" class="col-title">有效期：</el-col>
      <el-col :span="7" class="col-con">{{ detailObj.expirationTime&& detailObj.expirationTime }}年</el-col> -->
      <el-col :span="5" class="col-title">到期时间：</el-col>
      <el-col :span="7" class="col-con" :class="detailObj.remainingDay<90?detailObj.remainingDay<30?detailObj.remainingDay<7?'hong':'huang':'cheng':''">{{ detailObj.expiryDate && detailObj.expiryDate.split(' ')[0] }}</el-col>
      <!-- <el-col :span="5" class="col-title">有效期至：</el-col>
      <el-col :span="19" class="col-con">
        <el-tag v-if="detailObj.expiryDate" :type="setTag(detailObj.expiryDate)" size="mini">{{ detailObj.expiryDate&& detailObj.expiryDate.split(' ')[0] }} </el-tag>
      </el-col> -->
      <el-col :span="5" class="col-title">发证单位：</el-col>
      <el-col :span="19">{{ detailObj.issuingAuthority }}</el-col>
      <el-col :span="5" class="col-title">资质文件：</el-col>
      <el-col :span="19" class="col-con">
        <!-- <el-link type="primary" target="_blank" :href="detailObj.digitalCertificatePath">
          {{ detailObj.digitalCertificatePath }}
        </el-link> -->
        <el-link type="primary" target="_blank" @click="downloadDoc">
          {{ detailObj.digitalCertificateName }}
        </el-link>
      </el-col>
    </el-row>
    <footer v-if="!$route.query.showDetail">
      <el-button @click="handleEdit">编辑</el-button>
      <el-button @click="handleDelete">删除</el-button>
    </footer>
  </el-card>
</template>

<script>
import { downloadDoc } from '../../utils'
import dictLabel from '@/components/Common/dictLabel.vue'
export default {
  components: {
    dictLabel,
  },
  props: {
    detailObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dictList: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      prefix: window.prefix,
    }
  },
  mounted() {},
  methods: {
    handleEdit() {
      this.$emit('handleEdit')
    },
    handleDelete() {
      this.$emit('handleDelete')
    },
    downloadDoc() {
      // const imgs = process.env.VUE_APP_BASE_URL_ACTION + this.detailObj.digitalCertificatePath
      // console.log(imgs)
      // const a = window.open('')
      // a.document.write(`<!DOCTYPE html><html><body ><img src='${imgs}'/></body></html>`)

      // window.open(process.env.VUE_APP_BASE_URL_ACTION + this.detailObj.digitalCertificatePath)
      window.open(window.baseUrl.default + this.detailObj.digitalCertificatePath)
      // downloadDoc(this.detailObj.digitalCertificatePath,this.detailObj.digitalCertificateName)
    },
    // 设置有效期到期颜色
    setTag(val) {
      let endTime = new Date(val).getTime()
      let now = new Date().getTime()
      if (now > endTime) return 'danger'
      if (endTime > now) {
        let day = Math.floor((endTime - now) / (1000 * 60 * 60 * 24))
        if (day < 7) return 'danger'
        if (day < 30) return 'warning'
        if (day < 90) return ''
        if (day > 90) return 'success'
      }
    },
  },
}
</script>

  <style lang="scss" scoped>
 
.box-card {
  font-size: 12px;
  margin: 0;
  letter-spacing: 1px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      vertical-align: middle;
    }
    i {
      font-size: 16px;
      font-weight: 700;
      font-style: normal;
    }
  }
  .col-title {
    text-align: left;
  }
  .cheng{
    color: #f0940b !important;
  }
  .hong{
    color: #ea2323 !important;
  }
  .huang{
    color: #e3a548 !important;
  }
  .col-con {
    color: #8c8c8c;
  }
  .ctop {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 20px 20px;
    font-size: 12px;
    flex: 1;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
  }
  .el-col {
    margin-top: 5px;
    line-height: 20px;
  }
}
.el-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
footer {
  padding: 0;
  .el-button {
    width: 50%;
    border: none;
    margin: 0;
  }
  .el-button + .el-button {
    margin: 0;
    border-left: 1px solid #e5e5e5;
  }
}
::v-deep {
  .el-tag {
    border-radius: 20px;
  }
  .el-card__header {
    padding: 20px;
  }
  .el-card__body {
    padding: 0;
    display: flex;
    flex-direction: column;
  }
}
.blue-word {
  color: #4b6eef !important;
}
</style>

